<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="js/ext4/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext4/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="js/ext4/locale/ext-lang-zh_CN.js" />
</head>
<body>
<div id="tree"></div>
</body>
<script type="text/javascript">
var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    //title: 'Simple Tree',
    alias: 'widget.menutree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: 'tree'
});
</script>
</html>